<script setup>
import { useUserStore } from '@/stores/userStore';
import { onMounted } from 'vue';
const userStore = useUserStore()
onMounted(() => {
  userStore.getUser()
})
// import { getUserInfo } from '@/apis/noteList';
// import { onMounted, ref } from 'vue';

// const userInfo = ref({})
// const getUser = async () => {
//   const res = await getUserInfo()
//   userInfo.value = res.data
//   console.log(res);

// }
// onMounted(() => {
//   getUser()
// })
</script>
<template>
  <div class="user">
    <img :src="userStore.userInfo.userImg" alt="">
    <div class="content">
      <p class="name">{{ userStore.userInfo.userName }}</p>
      <p class="id">id:{{ userStore.userInfo.userId }}</p>
    </div>
  </div>
</template>

<style lang="less" scoped>
.user {
  margin: 100px auto;
  width: 200px;
  height: 400px;

  img {
    width: 100%;
    border-radius: 50%;
  }

  .content {
    width: 100%;
    text-align: center;
  }

  .name {
    font-size: 20px;
    font-weight: bold;
  }

  .id {
    font-size: 15px;
    color: rgb(107, 110, 113);
  }
}
</style>
